<template>
	<view :style="{width: w, height: h}">
		<view class="otherb" v-if="!blue_type">
			<view v-if="!itisMenuUnselected" :class="enable ? 'btn-a' : 'btn-a-unable'" @click="onClick">
				<loading v-if="loading"/>
				<block v-else><slot></slot></block>
			</view>
			<view v-else class="btn-a-menu" @click="onClick">
				<slot></slot>
			</view>
		</view>
		<view class="otherb" v-else>
			<view v-if="!itisMenuUnselected" :class="enable ? 'btn-a-b' : 'btn-a-b-unable'" @click="onClick">
				<loading v-if="loading"/>
				<block v-else><slot></slot></block>
			</view>
			<view v-else class="btn-a-b-menu" @click="onClick">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	
	import loading from '@/components/loading/loading.vue'
	
	export default {
		name:"btn-a",
		components: {
			loading
		},
		props: {
			w: {
				type: String,
				default: '300px'
			},
			h: {
				type: String,
				default: '50px'
			},
			
			loading: {
				type: Boolean,
				default: false
			},
			enable: {
				type: Boolean,
				default: true
			},
			itisMenuUnselected: {
				type: Boolean,
				default: false
			},
			blue_type: {
				type: Boolean,
				default: false
			}
		},
		
		data() {
			return {
				
			};
		},
		
		methods: {
			
			onClick() {
				// console.log(23223)
				if (this.enable && !this.loading)
				this.$emit('btnClick')
			}
		}
	}
</script>

<style scoped>
	
	.otherb {
		width: 100%;
		height: 100%;
		border: 1px #000000 solid;
		box-sizing: border-box;
	}
	
	.btn-a-menu {
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(159, 22, 0, 0.1);
		border: 1px rgba(159, 22, 0, 0.5) solid;
		color: white;
		display: flex;
		align-items: center;
		color: #f7b10a;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.btn-a-menu:hover {
		cursor: pointer;
		background-color: rgba(159, 22, 0, 0.8);
	}
	
	.btn-a-menu:active {
		background-color: #cd2307;
	}
	
	.btn-a {
		/* width: 300px;
		height: 50px; */
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(159, 22, 0, 0.6);
		border: 1px #ea3012 solid;
		color: white;
		display: flex;
		align-items: center;
		color: #f7b10a;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.btn-a-unable {
		
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(102, 102, 102, 0.8);
		border: 1px #818181 solid;
		color: white;
		display: flex;
		align-items: center;
		color: #939393;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.btn-a:hover {
		cursor: pointer;
		background-color: rgba(159, 22, 0, 0.8);
	}
	
	.btn-a:active {
		background-color: #cd2307;
	}
	

	.btn-a-b-menu {
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(31, 61, 159, 0.1);
		border: 1px rgba(0, 63, 159, 0.5) solid;
		color: white;
		display: flex;
		align-items: center;
		color: #f7b10a;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.btn-a-b-menu:hover {
		cursor: pointer;
		background-color: rgba(8, 54, 159, 0.8);
	}
	
	.btn-a-b-menu:active {
		background-color: #084dcd;
	}
	
	.btn-a-b {
		/* width: 300px;
		height: 50px; */
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(11, 102, 159, 0.6);
		border: 1px #0a4dea solid;
		color: white;
		display: flex;
		align-items: center;
		color: #f7b10a;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.btn-a-b-unable {
		
		width: 100%;
		height: 100%;
		font-size: 16px;
		background-color: rgba(102, 102, 102, 0.8);
		border: 1px #818181 solid;
		color: white;
		display: flex;
		align-items: center;
		color: #939393;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.btn-a-b:hover {
		cursor: pointer;
		background-color: rgba(12, 68, 159, 0.8);
	}
	
	.btn-a-b:active {
		background-color: #137dcd;
	}

</style>